const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        /* 
          处理不了html中的img图片 需要用html-loader
        */
        test: /\.(jpg|png|gif)$/,
        // 使用一个loader  url-loader依赖file-loader
        loader: 'url-loader',
        options: {
          /* 
            图片小于12kb,会被base64处理
            优点：减少请求数量（减轻服务器压力）
            缺点：图片体积会更大（文件请求速度更慢）
          */
          limit: 12 * 1024,
          /* 
            问题：url-loader默认使用es6模块化解析,而html-withimg引入图片是common.js
            解析时会出现问题：[object Module]
            解决：关闭url-loader的es6模块化，使用common.js解析
          */
          esModule: false,
          name: 'images/[hash:8][name].[ext]',
        },
      },
      {
        test: /\.html$/,
        // loader: 'html-loader',
        // ！！！！！注意：webpack5需要用html-withimg-loader打包才能显示
        loader: 'html-withimg-loader',
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  mode: 'development',
}
